<template>
  <div id="mainCenter">
    <div class="bg-color-black">
      <AverageTimeSpent />
<!--      <div class="d-flex" style="height: 100px;">-->
<!--        <div style="margin-top: 5px">-->
<!--          <el-radio-group v-model="activeMap" size="mini">-->
<!--            <el-radio-button label="站点图"></el-radio-button>-->
<!--            <el-radio-button label="热力图"></el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </div>-->
<!--      </div>-->
      <div class="d-flex" style="height: 100px;">
        <div style="margin-top: 5px">
          <el-radio-group v-model="activeMap" size="mini">
            <el-radio-button label="站点图"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="d-flex" style="height: 630px;">
        <div class="move-up-transform" v-if="1===2">
          <dv-border-box-7>
            <div style="width: 140px;height: 270px;">
              <IconValueList :listData="todayMainData"/>
            </div>
          </dv-border-box-7>
        </div>
        <div>
          <DeyangMap v-if="activeMap === '站点图'"/>
          <DeyangHeatMap v-else />

        </div>
      </div>
      <div class="d-flex" v-if="false" style="height: 90px;font-size: 14px;color: #b0b0b0;">
        <p>南京市站点平均覆盖半径：5公里，服务人口：942万</p>
      </div>
    </div>
  </div>
</template>

<script>
import AverageTimeSpent from "@/views/main/AverageTimeSpent/index.vue";
import DeyangMap from "@/components/echart/map/sichuan/deyang/deyangMap.vue";
import DeyangHeatMap from "@/components/echart/map/sichuan/deyang/deyangHeatMap.vue";
import IconValueList from "@/components/table/IconValueList.vue";

export default {
  components: {
    AverageTimeSpent,
    DeyangMap,
    DeyangHeatMap,
    IconValueList
  },
  data() {
    return {
      activeMap: '站点图',
      todayMainData: [
        { value: '744', label: '今日呼救数', iconText: '呼', color: '#FF6B6B' },
        { value: '18', label: '今日要车数', iconText: '车', color: '#4ECDC4' },
        { value: '240', label: '今日患者数', iconText: '患', color: '#FFD93D' },
        { value: '118', label: '今日出车数', iconText: '出', color: '#A663CC' },
        { value: '5', label: '当前缓派数', iconText: '缓', color: '#66BB6A' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 590px;
$box-height: 950px;

#mainCenter {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;

    .move-up-transform {
      transform: translateX(60px) translateY(110px);
      /* 可选：添加过渡动画让移动更平滑 */
      transition: transform 0.3s ease;
    }

  }
}

.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
